<template>
  <div class="wrap">
    <main>
      <header>
        <UserInfo />
        <HeaderNav />
      </header>
      <router-view></router-view>
    </main>
    <section class="sidebar">
      <HostArticle />
      <NewComment />
      <LableList />
    </section>
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import UserInfo from '@/components/home/userInfo.vue'
import HeaderNav from '@/components/home/headerNav.vue'
import HostArticle from '@/components/home/hotArticle.vue'
import NewComment from '@/components/home/newComment.vue'
import LableList from '@/components/home/labelList.vue'
</script>


<style>
body {
  background: #f2f2f2 !important;
  font-family: 'LXGWWENR',serif !important;
}
</style>

<style lang="less" scoped>
@import url('@/assets/homeFont.css');

.wrap {
  max-width: 1130px;
  margin: 50px auto;
  width: 100%;
  background: #fff;
  border-radius: 5px;
  display: flex;

  main {
    flex: 1;
    max-width: 820px;
    padding: 50px 30px;

    header {
      padding-bottom: 30px;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .sidebar {
    flex: 1;
    max-width: 280px;
    border-left: 1px solid var(--border-color);
    padding: 50px 25px;
  }
}
</style>
